<template>
<div>
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <header class="hd-top" v-if="$route.query.a == 1">
    <span class="iconfont icon-left" @click="goBack"></span>
    <h2 class="title">设置</h2>
  </header>
  <div :class="{'extra-top':$route.query.a == 1}">
    <div class="logo-bg2">
      <img src="@/assets/logo/logo_icon.png">
    </div>
    <ul class="login-wrap">
      <li class="displayflex">
        <span class="iconfont icon-tel"></span>
        <div class="flex1 login-ipt">
          <div v-if="$route.query.a=='1'">{{UserInfo.LogonUser}}</div>
          <input type="tel" placeholder="手机号" v-model="username" v-else>
        </div>
        <span class="iconfont icon-del" v-if="username" @click="username=''"></span>
      </li>
      <li class="displayflex">
        <span class="iconfont icon-num"></span>
        <div class="flex1 login-ipt"><input type="text" placeholder="验证码" v-model="code"></div>
        <div class="code-box"><button class="get-code" @click="getCode" :disabled="disabledv">{{codeText}}</button></div>
      </li>
      <li class="displayflex">
        <span class="iconfont icon-password"></span>
        <div class="flex1 login-ipt">
          <input type="password" placeholder="密码" v-model="password" v-if="!showPw">
          <input type="text" placeholder="密码" v-model="password" v-if="showPw">
        </div>
        <span class="iconfont icon-eye" :class="{'icon-open-eye':showPw}" @click="changePw"></span>
      </li>
    </ul>
    <div class="btn-w90 mt60">
      <button class="btn btn-default btn-click" @click="sure">确 定</button>
    </div>
    <div class="login-bottom" v-if="!$route.query.a">
      <router-link :to="{ path: '/login'}" class="f-r">去登录</router-link>
    </div>
  </div>
</div>
</template>
<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      username: "",
      password: "",
      code: "",
      keynum: "",
      showPw: false,
      codeText: "获取验证码",
      time: 60,
      disabledv: false,
      showLoad: false,
      ValidCode: ""
    };
  },
  computed: {
    UserInfo() {
      if (localStorage.UserInfo) {
        this.username = JSON.parse(localStorage.UserInfo).LogonUser;
        return JSON.parse(localStorage.UserInfo);
      } else {
        return "";
      }
    }
  },
  created() {
    if (this.$route.query.a) {
      document.title = "修改密码";
    } else {
      document.title = "忘记密码";
    }
  },
  methods: {
    checkTel(val) {
      var reg = /^1[345789]\d{9}$/;
      if (!reg.test(val) || !val) {
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "请填写正确手机号"
        });
        return false;
      } else {
        return true;
      }
    },
    getValidCode() {
      var code = Math.floor(Math.random() * 9000) + 1000;
      this.ValidCode = code;
      //this.code = code;
      return code;
    },
    getIsUser(LogonUser) {
      var _this = this,
        timeCount;
      var reg = /^1[345789]\d{9}$/,
        val = LogonUser;
      if (!reg.test(val) || !val) {
        _this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "请填写正确手机号"
        });
        return false;
      }
      var query = {
        LogonUser: LogonUser
      };
      this.Ajax.post("IsUserinfo", query).then(function(resp) {
        if (!resp.IsSuccess) {
          _this.$vux.toast.show({
            type: "success", //success, warn, cancel, text
            text: resp.ErrorMessage
          });
          return false;
        } else {
          function count() {
            if (_this.time === 0) {
              clearInterval(timeCount);
              _this.disabledv = false;
              _this.codeText = "获取验证码";
              _this.time = 60;
              return false;
            }
            _this.codeText = _this.time + " 秒后重试";
            _this.time--;
          }
          if (!_this.$route.query.a) {
            var reg = /^1[345789]\d{9}$/,
              val = _this.username;
            if (!reg.test(val) || !val) {
              _this.$vux.toast.show({
                type: "warn", //success, warn, cancel, text
                text: "请填写正确手机号"
              });
              return false;
            }
          }
          _this.disabledv = true;
          timeCount = setInterval(count, 1000);

          // 请求接口
          var content =
            "【来誉链享】 您的验证码是：" +
            _this.getValidCode() +
            "。如非本人操作，请忽略本短信。";
          var query = {
            ContactTel: LogonUser,
            Content: content
          };

          _this.Ajax.post("SendMessage", query).then(function(resp) {
            if (resp.IsSuccess) {
              _this.$vux.toast.show({
                type: "success", //success, warn, cancel, text
                text: "验证码已发送，请注意查收"
              });
            }
          });
        }
      });
    },
    getCode() {
      var _this = this,
        timeCount;
      _this.getIsUser(this.username);
    },

    changePw() {
      this.showPw = !this.showPw;
    },

    sure() {
      if (!this.$route.query.a) {
        var reg = /^1[345789]\d{9}$/,
          val = this.username;
        if (!reg.test(val) || !val) {
          this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: "请填写正确手机号"
          });
          return false;
        }
      }
      if (!this.code) {
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "请填写验证码"
        });
        return false;
      }
      var pwReg = /^\w{6,}$/,
        pwValue = this.password;
      if (!pwValue || !pwReg.test(pwValue)) {
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "请填写至少6位数字或字母密码"
        });
        return false;
      }
      if (this.code != this.ValidCode) {
        this.$vux.toast.show({
          type: "warn", //success, warn, cancel, text
          text: "验证码错误"
        });
        return false;
      }

      //请求接口
      this.showLoad = true;
      var _this = this,
        query = {
          LogonUser: _this.username || _this.UserInfo.LogonUser,
          NewPwd: md5(_this.password).toUpperCase()
        };
      this.Ajax.post("UserChangePwd", query).then(function(resp) {
        _this.showLoad = false;
        if (resp.IsSuccess) {
          //清除
          sessionStorage.clear();
          localStorage.clear();
          _this.$vux.toast.show({
            type: "success", //success, warn, cancel, text
            text: "修改完成",
            onHide() {
              _this.$router.push({
                path: "/login"
              });
            }
          });
        } else {
          _this.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.ErrorMessage
          });
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>